<template>
  <div>
    <p>商品清单如下:</p>
    <p v-for="(obj, index) in arr" :key="index">
      <span>{{ obj.shopName }}</span>
      <span>{{ obj.price }}</span>
      元/份
    </p>

    <br />

    <p>请选择商品数量:</p>
    <ShuPian
      v-for="(item, index) in arr"
      :key="index"
      :name="item.shopName" 
      :count="item.count"
      :ind="index+''"
      @jia="tianjia"

      @del="jianshao"
    />
    <br />
    <p>总价为:{{total}}</p>
  </div>
</template>

<script>
import ShuPian from "./components/ShuPian.vue";
export default {
    computed:{
        total(){
return this.arr.reduce((accu,val) =>{return accu+=val.count*val.price},0)
        }
    },
    methods:{
        tianjia(i){
            this.arr[i].count++
        },
        jianshao(i){
            this.arr[i].count--
        }
    },
  components: {
    ShuPian,
  },
  data() {
    return {
      arr: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
};
</script>

<style>
</style>